<!-- demo -->
<template>
  <div class="demo-con">
    <van-nav-bar left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="onClickRight" />
      </template>
      <template #title>
        {{ $route.meta.title }}
        <!-- {{$route.meta.title}}--根据路由中title取值 -->
      </template>
    </van-nav-bar>
    <!-- swipe 图片使用懒加载-->
    <van-swipe :autoplay="3000" height="250" :stop-propagation="false" @change="onChange">
      <van-swipe-item v-for="(image, index) in images" :key="index" @click="handelSwipeItem">
        <img v-lazy="image" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
    <!-- 九宫格  // //本地图片引用需要使用require('') -->
    <van-grid :border="true" :column-num="3" clickable square>
      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu1.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu2.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>图片分享</p>
      </van-grid-item>

      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu3.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu4.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu5.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item to="/">
        <van-image :src="require('../../assets/iconImages/menu6.png')" width="50" height="50" />
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
    <div class="iconfont">&#58920;</div>1
    <div class="iconfont">&#58921;</div>2
    <div class="iconfont">&#58922;</div>3
    <div class="iconfont">&#58906;</div>4
    <div class="iconfont">&#58924;</div>5
    <div class="iconfont">&#58925;</div>6
    <div class="iconfont">&#58926;</div>7
    <div class="iconfont">&#58927;</div>8
    <div class="iconfont">&#58928;</div>9
    <div class="iconfont">&#58929;</div>10
    <div class="iconfont">&#58930;</div>11
    <div class="iconfont">&#59007;</div>12
    <div class="iconfont">&#58880;</div>13
    <div class="iconfont">&#58890;</div>14
    <div class="iconfont">&#58891;</div>15
    <div class="iconfont">&#58892;</div>16
    <div class="iconfont">&#58893;</div>17
    <div class="iconfont">&#58897;</div>18
    <div class="iconfont">&#58898;</div>19
    <div class="iconfont">&#58899;</div>20
    <div class="iconfont">&#58900;</div>21
    <div class="iconfont">&#58903;</div>22
    <div class="iconfont">&#58905;</div>23
    <div class="iconfont">&#58908;</div>24
    <div class="iconfont">&#58910;</div>25
    <div class="iconfont">&#58911;</div>26
    <div class="iconfont">&#58912;</div>27
    <div class="iconfont">&#58913;</div>28
    <div class="iconfont">&#58914;</div>29
    <div class="iconfont">&#58915;</div>30
    <div class="iconfont">&#58916;</div>31
    <div class="iconfont">&#58917;</div>32
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { Toast } from 'vant'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    // 1 使用组件名"van-nav-bar":NavBar,方式定义组件
    // 'van-nav-bar': NavBar,
    //  2 使用[***.name]:**  方式定义组件
    // [Icon.name]: Icon,
  },
  data() {
    // 这里存放数据
    return {
      msg: 'demo',
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      current: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  methods: {
    onClickLeft() {
      Toast('返回')
    },
    onClickRight() {
      Toast('按钮')
    },
    // swipe onChange
    onChange(index) {
      this.current = index
      // console.log(this.current+1);
    },
    // handelSwipeItem
    handelSwipeItem() {
      console.log('1111')
    }
  }
}
</script>
<style lang='scss' scoped>
/*@import url(); 引入公共css类*/
.demo-con {
  .van-swipe {
    .van-swipe-item {
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
